// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the GNU Affero General Public License v3.0.
// See the LICENCE file in the repository root for full licence text.

@purple-lighter: #eeeeff;
@purple-light: #aa88ff;
@purple: #8866ee;
@purple-dark: #6644cc;
@purple-darker: #441188;

@pink-lighter: #ffddee;
@pink-light: #ff99cc;
@pink: #ff66aa;
@pink-dark: #cc5288;
@pink-darker: #bb1177;

@blue-lighter: #ddffff;
@blue-light: #99eeff;
@blue: #66ccff;
@blue-dark: #44aadd;
@blue-darker: #2299bb;

@yellow-lighter: #ffffdd;
@yellow-light: #ffdd55;
@yellow: #ffcc22;
@yellow-dark: #eeaa00;
@yellow-darker: #cc6600;

@green-lighter: #eeffcc;
@green-light: #b3d944;
@green: #88b300;
@green-dark: #668800;
@green-darker: #445500;

@red-lighter: #ffeded;
@red-light: #ed7887;
@red: #ed1221;
@red-dark: #ba0011;
@red-darker: #870000;

// https://about.twitter.com/en/who-we-are/brand-toolkit
@twitter-colour: #1d9bf0;
// used the blue from the top bar on facebook, https://www.facebookbrand.com is useless and doesn't list colors
@facebook-colour: #3b5998;
// .sc-orange on https://soundcloud.com ¯\_(ツ)_/¯
@soundcloud-colour: #f50;
// bandcamp "green" from the provided buttons at https://bandcamp.com/buttons
@bandcamp-colour: #61929c;
// spotify "Green*" from https://developer.spotify.com/design/
@spotify-colour: #1db954;
// patreon orange from the provided logos at https://www.patreon.com/toolbox/media
@patreon-colour: #e6461a;
// youtube red from https://www.youtube.com/yt/brand/ (yes it's supposed to be rgb(255,0,0) - my poor eyes...)
@youtube-colour: #ff0000;

// just for reference, from bootstrap's variables.less
// @gray-base:              #000;
// @gray-darker:            lighten(@gray-base, 13.5%); // #222
// @gray-dark:              lighten(@gray-base, 20%);   // #333
// @gray:                   lighten(@gray-base, 33.5%); // #555
// @gray-light:             lighten(@gray-base, 46.7%); // #777
// @gray-lighter:           lighten(@gray-base, 93.5%); // #eee

// TODO: remove after remaining white-background sections have been updated (forum, store)
// osu!palette 2017(?)
@gray: #262626;
@gray-dark: #1a1a1a;
@gray-darker: #0e0e0e;
@light-gray: #f5f5f5;

// osu!palette 2019v2-final-copy-last-FINAL
// The default hue is osu! pink (333) and is injected into the body via master.blade.php as var(--base-hue) within body
// The section-to-colour mapping is done via section_to_hue_map() in helpers.php
body {
  @base-colours: {
    // key: name
    // value: saturation, lightness
    p: 100%, 50%;
    h1: 100%, 70%;
    h2: 50%, 45%;
    c1: 40%, 100%;
    c2: 40%, 90%;
    l1: 40%, 80%;
    l2: 40%, 75%;
    l3: 40%, 70%;
    l4: 40%, 50%;
    d1: 20%, 35%;
    d2: 20%, 30%;
    d3: 20%, 25%;
    d4: 20%, 20%;
    d5: 20%, 15%;
    d6: 20%, 10%;
    f1: 10%, 60%;
    b1: 10%, 40%;
    b2: 10%, 30%;
    b3: 10%, 25%;
    b4: 10%, 20%;
    b5: 10%, 15%;
    b6: 10%, 10%;
  };

  each(@base-colours, {
    --hsl-@{key}: var(--base-hue), @value;
  });
}
@osu-colour-p: hsl(var(--hsl-p));
@osu-colour-h1: hsl(var(--hsl-h1));
@osu-colour-h2: hsl(var(--hsl-h2));
@osu-colour-c1: hsl(var(--hsl-c1));
@osu-colour-c2: hsl(var(--hsl-c2));
@osu-colour-l1: hsl(var(--hsl-l1));
@osu-colour-l2: hsl(var(--hsl-l2));
@osu-colour-l3: hsl(var(--hsl-l3));
@osu-colour-l4: hsl(var(--hsl-l4));
@osu-colour-d1: hsl(var(--hsl-d1));
@osu-colour-d2: hsl(var(--hsl-d2));
@osu-colour-d3: hsl(var(--hsl-d3));
@osu-colour-d4: hsl(var(--hsl-d4));
@osu-colour-d5: hsl(var(--hsl-d5));
@osu-colour-d6: hsl(var(--hsl-d6));
@osu-colour-f1: hsl(var(--hsl-f1));
@osu-colour-b1: hsl(var(--hsl-b1));
@osu-colour-b2: hsl(var(--hsl-b2));
@osu-colour-b3: hsl(var(--hsl-b3));
@osu-colour-b4: hsl(var(--hsl-b4));
@osu-colour-b5: hsl(var(--hsl-b5));
@osu-colour-b6: hsl(var(--hsl-b6));

//
// "Basic" Colour Theme (as of 2019)
//
body {
  @colours: {
    // key: name
    // value: hue
    pink: 333;
    purple: 255;
    blue: 200;
    green: 125;
    lime: 90;
    orange: 45;
    red: 360;
    darkorange: 20;
  };

  --c-saturation-1: 100%;
  --c-saturation-2: 80%;
  --c-saturation-3: 60%;
  --c-saturation-4: 40%;
  --c-lightness-1: 70%;
  --c-lightness-2: 60%;
  --c-lightness-3: 50%;
  --c-lightness-4: 30%;
  each(@colours, {
    --colour-@{key}-hue: @value;
    --hsl-@{key}-1: var(~"--colour-@{key}-hue"), var(--c-saturation-1), var(--c-lightness-1);
    --hsl-@{key}-2: var(~"--colour-@{key}-hue"), var(--c-saturation-2), var(--c-lightness-2);
    --hsl-@{key}-3: var(~"--colour-@{key}-hue"), var(--c-saturation-3), var(--c-lightness-3);
    --hsl-@{key}-4: var(~"--colour-@{key}-hue"), var(--c-saturation-4), var(--c-lightness-4);
  });
}
// osu!Pink
@osu-colour-pink-1: hsl(var(--hsl-pink-1));
@osu-colour-pink-2: hsl(var(--hsl-pink-2));
@osu-colour-pink-3: hsl(var(--hsl-pink-3));
// Purple
@osu-colour-purple-1: hsl(var(--hsl-purple-1));
@osu-colour-purple-2: hsl(var(--hsl-purple-2));
@osu-colour-purple-3: hsl(var(--hsl-purple-3));
// Blue
@osu-colour-blue-1: hsl(var(--hsl-blue-1));
@osu-colour-blue-2: hsl(var(--hsl-blue-2));
@osu-colour-blue-3: hsl(var(--hsl-blue-3));
// Green
@osu-colour-green-1: hsl(var(--hsl-green-1));
@osu-colour-green-2: hsl(var(--hsl-green-2));
@osu-colour-green-3: hsl(var(--hsl-green-3));
// Lime
@osu-colour-lime-1: hsl(var(--hsl-lime-1));
@osu-colour-lime-2: hsl(var(--hsl-lime-2));
@osu-colour-lime-3: hsl(var(--hsl-lime-3));
// Orange
@osu-colour-orange-1: hsl(var(--hsl-orange-1));
@osu-colour-orange-2: hsl(var(--hsl-orange-2));
@osu-colour-orange-3: hsl(var(--hsl-orange-3));
// Red
@osu-colour-red-1: hsl(var(--hsl-red-1));
@osu-colour-red-2: hsl(var(--hsl-red-2));
@osu-colour-red-3: hsl(var(--hsl-red-3));
// Darkorange
@osu-colour-darkorange-1: hsl(var(--hsl-darkorange-1));
@osu-colour-darkorange-2: hsl(var(--hsl-darkorange-2));
@osu-colour-darkorange-3: hsl(var(--hsl-darkorange-3));

@pink-text: @pink-dark;
@green-text: @green-darker;
@blue-text: @blue-darker;
@yellow-text: @yellow-darker;
@purple-text: @purple-darker;
@gray-text: @gray-darker;

@link-gray-light: #ccc;
@link-gray-light-hover: #eee;

@group-colour-default: #0087ca;

// cross-reference: https://github.com/ppy/osu/blob/b658d9a681a04101900d5ce6c5b84d56320e08e7/osu.Game/Graphics/OsuColour.cs#L42-L73
@colour-rank-d: #ff5a5a;
@colour-rank-c: #ff8e5d;
@colour-rank-b: #e3b130;
@colour-rank-a: #88da20;
@colour-rank-s: #02b5c3;
@colour-rank-ss: #de31ae;
